<template>
  <!-- 创建新租表单第四步 - 确认会审单并提交 -->
  <div class="container">
    <CommonTitle title-name="项目基本信息"></CommonTitle>
    <!--    项目基本信息      -->
    <el-card class="card-box">
      <el-form :inline="true">
        <el-row>
          <el-col :span="11">
            <el-form-item class="el-form-item-width" label="合同名称">
              <el-input v-model="form.contractName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="11">
            <el-form-item class="el-form-item-width" label="项目名称">
              <el-input v-model="form.projectName" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="el-form-item-width" label="合同编号">
              <el-input v-model="form.contractId" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="11">
            <el-form-item class="el-form-item-width" label="任务来源">
              <el-input v-model="form.meetingTitle" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <CommonTitle class="m-t30" title-name="承租方(签约方信息)"></CommonTitle>
    <!--    承租方(签约方信息)      -->
    <el-card class="card-box">
      <el-form :inline="true">
        <el-row>
          <el-col :span="13">
            <el-form-item class="el-form-item-width" label="承租方(签约方)名称">
              <el-input
                :model-value="
                  form.leaseCustomers && form.leaseCustomers.length !== 0
                    ? form.leaseCustomers[0].customerName
                    : '暂无'
                "
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="9">
            <el-form-item class="el-form-item-width" label="签约(竞选)方式">
              <el-input
                :model-value="form.signType === 1 ? '新签' : '续签'"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <CommonTitle class="m-t30" title-name="出租资产和房源信息"></CommonTitle>
    <!--    出租资产和房源信息      -->
    <el-card class="card-box">
      <el-form :inline="true">
        <el-form-item class="el-form-item-width" label="资产名称">
          <el-input v-model="form.assetsName" disabled />
        </el-form-item>
        <el-form-item class="el-form-item-width" label="资产位置">
          <el-input v-model="form.address" disabled />
        </el-form-item>
        <el-row>
          <el-col :span="9">
            <el-form-item class="el-form-item-width" label="租赁面积">
              <el-input v-model="form.leaseTotalArea" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="13">
            <el-form-item class="el-form-item-width" label="房源明细">
              <el-input
                :model-value="
                  form.leaseHousings && form.leaseHousings.length !== 0
                    ? form.leaseHousings[0].housingNumber:''
                "
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="el-form-item-width" label="租赁周期">
              <el-input
                :model-value="form.signStartTime + '-' + form.signEndTime"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="11">
            <el-form-item class="el-form-item-width" label="租赁用途">
              <el-input v-model="form.purpose" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <CommonTitle class="m-t30" title-name="费用信息"></CommonTitle>
    <!--    出租资产和房源信息      -->
    <el-card class="card-box">
      <el-form label-position="left" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item class="el-form-item-width" label="我方收款账号">
              <el-input :model-value="form.payeeAccount || ''" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="3"></el-col>
          <el-col :span="6">
            <el-form-item class="el-form-item-width" label="开户行">
              <el-input :model-value="form.payeeBank || ''" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="3"></el-col>
          <el-col :span="6">
            <el-form-item class="el-form-item-width" label="保证金(元)">
              <el-input v-model="form.deposit" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item class="el-form-item-width" label="合同金额">
              <el-input v-model="form.contractTotalPrice" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="3"></el-col>
          <el-col :span="6">
            <el-form-item class="el-form-item-width" label="应收款总金额">
              <el-input v-model="form.receivableTotalPrice" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="3"></el-col>
          <el-col :span="6">
            <el-form-item class="el-form-item-width" label="装修优惠期">
              <el-input v-model="form.freeRentMonth" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item class="el-form-item-width" label="租金递增模式">
              <el-input v-model="form.increaseStartYear" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="3"></el-col>
          <el-col :span="6">
            <el-form-item class="el-form-item-width" label="递增比例">
              <el-input v-model="form.increaseRate" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="3"></el-col>
          <el-col :span="6">
            <el-form-item class="el-form-item-width" label="支付方式">
              <el-input :model-value="['','月度','季度','半年','年'][form.payType]" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        class="m-t10"
        :data="form.leaseRentPlans"
        :header-cell-style="{ background: '#EDEDED' }"
        border
        style="width: 100%"
      >
        <el-table-column prop="numberOfPeriods" label="期数"></el-table-column>
        <el-table-column prop="payStartTime" label="期间">
          <template #default="scope">
            <span>{{
              scope.row.payStartTime + "-" + scope.row.payEndTime
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="increaseRatio" label="递增(%)" />
        <el-table-column prop="rentUnitPrice" label="租金单价(元/㎡/月)" />
        <el-table-column
          v-if="form.payType === 1"
          prop="receivableRent"
          label="月度租金(元)"
        />
        <el-table-column
            v-if="form.payType === 2"
            prop="receivableRent"
            label="季度租金(元)"
        />
        <el-table-column
          v-if="form.payType === 3"
          prop="receivableRent"
          label="半年租金(元)"
        />
        <el-table-column
          v-if="form.payType === 4"
          prop="receivableRent"
          label="年底租金(元)"
        />
      </el-table>
    </el-card>

    <CommonTitle class="m-t30" title-name="协议经办方信息"></CommonTitle>
    <el-card class="card-box">
      <el-form>
        <el-row>
          <el-col class="d-flex a-center" :span="3">
            <el-form-item class="m-b0" label="经办人">
              <span>{{ form.manageUserName || "暂无" }}</span>
            </el-form-item>
          </el-col>
          <el-col class="d-flex a-center" :span="3">
            <el-form-item class="m-b0" label="部门">
              <span>{{ form.departmentName }}</span>
            </el-form-item>
          </el-col>
          <el-col class="d-flex a-center" :span="3">
              <el-button
                      class="m-l10"
                      @click="previewContract"
              >预览合同</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

      <CommonTitle class="m-t30"  :titleName="'附件'"></CommonTitle>
      <div class="fileVoList m-l20 m-b10" v-if="form.fileVoList && form.fileVoList.length!==0">
          <div class="fileItem" v-for="(item,index) in form.fileVoList" :key="index" @click="onDownload(item)">
              <span class="fileItem-font">{{item.fileName}}</span>
          </div>
      </div>
      <el-empty v-else description="暂无数据"/>

    <div class="button-wrapper d-flex a-center j-center m-t30">
      <el-button @click="goBack" class="button_edit">返回上一级</el-button>
      <el-button @click="onSubmit()" class="button_view">提交会审单</el-button>
    </div>
  </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import {
  ElCard,
  ElRow,
  ElCol,
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElMessage,
  ElEmpty
} from "element-plus";
import {useRouter } from "vue-router";
import { contractApi } from "@/api/coordination";
import { contractApi as contractApi2 } from "@/api/assets";
import { reactive, ref, onMounted } from "vue";
import {downloadFile, downloadImage, localGet} from "@/common/utils/GlobalUtils";
import {clearCache} from "@/utils/createRoutes";

const contractId = ref("");

const form = reactive({});

const tableData = reactive([]);
const router = useRouter();

// 查询会审单
const getHuiShenForm = (contractId) => {
  contractApi.getCacheCheckupInfo({ contractId: contractId }).then((res) => {
      for(let key in res.data){
          form[key] = res.data[key];
      }
  });
};

const emits = defineEmits(["nextStep"]);

// 返回上一级
const goBack = () => {
  emits("nextStep", "GoSupplementaryForm");
};

// 提交会审单
const onSubmit = () => {
  contractApi2
    .saveCheckupInfo({
      contractId: contractId.value, // 合同编号
    })
    .then((res) => {
      if (res.code == 200) {
        ElMessage.success("提交成功!");
        setTimeout(() => {
          router.push({ path: `/asset/collaborativeApproval` });
        }, 1000);
        clearCache({title:'创建新租表单'});
        // router.push({ path: `/asset/collaborativeApproval/createXinZhuForm/index` });
      }
    });
};

/**
 * 预览合同
 */
const previewContract = () => {
    if((form.file && form.file.fileUrlKey && form.file.fileUrlKey!=='') || (form.file && form.file.fileUrlKey)){
        let fileUrlKey = form.file.fileUrlKey.replaceAll("/","@")
        let types = form.file.fileUrlKey.split('.');
        if(types[types.length-1]==='docx'){
            window.open(`/document/docx/${fileUrlKey}`);
        }
        if(types[types.length-1]==='pdf'){
            window.open(`/document/pdf/${fileUrlKey}`);
        }
    }
}

/**
 * 下载
 */
const onDownload = (item) => {
    let types = ['jpeg','png','gif','bmp','jpg']
    if(types.includes(item.fileName.split('.')[1])){ // 图片
        downloadImage(item.fileAddress,item.fileName);
    }
    if(!types.includes(item.fileName.split('.')[1])){ // 非图片
        downloadFile(item.fileAddress, item.fileName);
    }
}

onMounted(() => {
  contractId.value = localGet("contractId");
  getHuiShenForm(contractId.value);
});
</script>

<style lang="scss" scoped>
.fileVoList{
  .fileItem{
    .fileItem-font{
      color: #ff7b56;
      cursor: pointer;
    }
  }
}


.container {
  width: 100%;
  height: auto !important;
  .card-box {
    width: 100%;
    .input-width {
      width: 548px;
    }
    .el-form-item-width {
      width: 100%;
    }
  }

  .button-wrapper {
    width: 100%;
  }
}
</style>
